<script setup>
import SelectDeptList from "@/views/document/my/selectDeptList.vue";
import {getDocumentOperateMenu} from "@/utils/menu.js";
import {updateDocMyBasicInfo} from "@/api/document/myDocument.js";
import {isNull} from "@/utils/validate.js";
import {backMyDocList} from "@/utils/backList.js";
import {filemakerctrl} from "js-pageoffice";
import {deptFunctions} from "@/utils/document-my.js";

const {proxy} = getCurrentInstance()
const {urgency, secretLevel} = proxy.useDict(["urgency", false], ["secretLevel", false])
const loading = ref(false)
const docId = ref(0)
const props = defineProps({
  documentInfo: {
    type: Object
  }
})
const isAllowCopy = ref(true)
const isWaterMark = ref(true)
const deptListOpen = ref(false)
let deptOpProp = {}
const data = reactive({
  docUpdateForm: {
    mainSendUnits: '',
    copySendUnits: ''
  },
  rules: {
    subject: [{ required: true,  message: "发文标题不能为空", trigger: 'change'}],
    urgency: [{ required: true,  message: "请选择紧急程度", trigger: 'change'}],
    secretLevel: [{ required: true,  message: "请选择密级", trigger: 'change'}],
    sendUnit: [{ required: true,  message: "请选择发文单位", trigger: 'manual'}]
  }
})
const {docUpdateForm, rules} = toRefs(data)
const emits = defineEmits('getDocBasicInfo')
const opMenuEnum = getDocumentOperateMenu()
const customReadonlyInputStyle = ref({cursor: 'not-allowed'})
const {
  openDeptDialog,
  closeDeptDialog,
  getDeptList,
  handleSelectedDept,
  clearSendUnit,
  clearMainSendUnits,
  clearCopySendUnits
} = deptFunctions(deptListOpen, deptOpProp, docUpdateForm)

watch(() => props.documentInfo, (newValue) => {
  if (newValue) {
    docId.value = props.documentInfo.id
    docUpdateForm.value = props.documentInfo
    const mainSendUnitList = props.documentInfo.mainSendUnitList, copySendUnitList = props.documentInfo.copySendUnitList
    let mainSendUnits = '', copySendUnits = ''
    if (!isNull(mainSendUnitList)) {
      for (const item of mainSendUnitList) {
        mainSendUnits = mainSendUnits.concat(',' + item.name)
      }
      mainSendUnits = mainSendUnits.substring(1, mainSendUnits.length)
    }
    if (!isNull(copySendUnitList)) {
      for (const item of copySendUnitList) {
        copySendUnits = copySendUnits.concat(',' + item.name)
      }
      copySendUnits = copySendUnits.substring(1, copySendUnits.length)
    }
    docUpdateForm.value.mainSendUnits = mainSendUnits
    docUpdateForm.value.copySendUnits = copySendUnits
  }
})

function updateDocBasicInfo() {
  proxy.$refs["docUpdateFormRef"].validate(valid => {
    if (valid) {
      loading.value = true
      updateDocMyBasicInfo(docUpdateForm.value).then(() => {
        wordAutoFill(docId.value)
      }).catch((msg) => {
        loading.value = false
        proxy.$modal.alertError(msg)
      })
    }
  })
}

function wordAutoFill(docId) {
  //填充呈批表
  filemakerctrl.SaveFilePage = '/doc/my/updateApprovalWord/' + docId
  filemakerctrl.CallFileMaker({
    url: "/doc/my/approvalAutoFill/" + docId,
    success: function () {
      //填充正文
      filemakerctrl.SaveFilePage = '/doc/my/updateMainWord?id=' + docId
      filemakerctrl.CallFileMaker({
        url: "/doc/my/mainAutoFill/" + docId,
        success: function () {
          loading.value = false
          proxy.$modal.msgSuccess("保存成功")
          emits("getDocBasicInfo")
        },
        error: function (msg) {
          wordAutoFillFail(msg)
        }
      })
    },
    error: function (msg) {
      wordAutoFillFail(msg)
    }
  })
  function wordAutoFillFail(msg) {
    loading.value = false
    proxy.$modal.alertError(msg)
  }
}

const changIsAllowCopy = (val) => {
  isAllowCopy.value = val
}

const changIsWaterMark = (val) => {
  isWaterMark.value = val
}

</script>

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :model="docUpdateForm" :rules="rules" ref="docUpdateFormRef"
                 v-loading="loading" label-position="top" label-width="auto">
          <el-row>
            <el-form-item>
              <el-button @click="backMyDocList">返 回</el-button>
              <el-button type="primary" @click="updateDocBasicInfo()">保 存</el-button>
            </el-form-item>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="禁止拷贝公文" prop="isAllowCopy">
                <el-switch
                    v-model="docUpdateForm.isAllowCopy"
                    inline-prompt
                    active-text="禁止"
                    active-value="否"
                    inactive-text="允许"
                    inactive-value="是"
                    style="--el-switch-on-color: #529b2e; --el-switch-off-color: #6379bb"
                    @change="changIsAllowCopy"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="添加水印" prop="isWaterMark">
                <el-switch
                    v-model="docUpdateForm.isWaterMark"
                    inline-prompt
                    active-text="是"
                    active-value="是"
                    inactive-text="否"
                    inactive-value="否"
                    style="--el-switch-on-color: #529b2e; --el-switch-off-color: #6379bb"
                    @change="changIsWaterMark"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="紧急程度" prop="urgency">
                <el-select v-model="docUpdateForm.urgency" placeholder="请选择">
                  <el-option
                      v-for="dict in urgency"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密级" prop="secretLevel">
                <el-select v-model="docUpdateForm.secretLevel" placeholder="请选择">
                  <el-option
                      v-for="dict in secretLevel"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="发文标题" prop="subject">
                <el-input v-model="docUpdateForm.subject" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发文字号" prop="docNo">
                <el-input v-model="docUpdateForm.docNo" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="公文模板" prop="templateName">
                <el-input disabled v-model="docUpdateForm.templateName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发文单位" prop="sendUnit">
                <el-input readonly :input-style="customReadonlyInputStyle" v-model="docUpdateForm.sendUnit" placeholder="" style="width: 85%;" >
                  <template #suffix>
                    <el-icon class="el-input__icon" @click="clearSendUnit" style="color: #409EFF; cursor: pointer;"><CircleClose /></el-icon>
                  </template>
                </el-input>
                <el-button type="primary" @click="openDeptDialog('sendUnit', '')" style="margin-left: -2px; width: 15%;">请选择</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="主送单位" prop="mainSendUnitIds">
                <input type="hidden" v-model="docUpdateForm.mainSendUnitIds" />
                <el-input readonly :input-style="customReadonlyInputStyle" v-model="docUpdateForm.mainSendUnits" placeholder="" style="width: 85%;">
                  <template #suffix>
                    <el-icon class="el-input__icon" @click="clearMainSendUnits" style="color: #409EFF; cursor: pointer;"><CircleClose /></el-icon>
                  </template>
                </el-input>
                <el-button type="primary" @click="openDeptDialog('mainSendUnits', 'mainSendUnitIds')" style="margin-left: -2px; width: 15%;">请选择</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="抄送单位" prop="copySendUnitIds">
                <input type="hidden" v-model="docUpdateForm.copySendUnitIds" />
                <el-input readonly :input-style="customReadonlyInputStyle" v-model="docUpdateForm.copySendUnits" placeholder="" style="width: 85%;">
                  <template #suffix>
                    <el-icon class="el-input__icon" @click="clearCopySendUnits" style="color: #409EFF; cursor: pointer;"><CircleClose /></el-icon>
                  </template>
                </el-input>
                <el-button type="primary" @click="openDeptDialog('copySendUnits', 'copySendUnitIds')" style="margin-left: -2px; width: 15%;">请选择</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="公文摘要" prop="docPrecis">
                <el-input type="textarea" :rows="2" v-model="docUpdateForm.docPrecis" placeholder="" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发文意见" prop="sendUnitAdvice">
                <el-input type="textarea" :rows="2"  v-model="docUpdateForm.sendUnitAdvice" placeholder="" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="限办日期" prop="endDate">
                <el-date-picker
                    v-model="docUpdateForm.endDate"
                    type="date"
                    placeholder="选择日期"
                    clearable
                    style="width: 100%;"
                    value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="印发日期" prop="printDate">
                <el-date-picker
                    v-model="docUpdateForm.printDate"
                    type="date"
                    placeholder="选择日期"
                    clearable
                    style="width: 100%;"
                    value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="印发机关" prop="printUnit">
                <el-input v-model="docUpdateForm.printUnit" placeholder="" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="印发份数" prop="printCount">
                <el-input v-model="docUpdateForm.printCount" placeholder="" clearable/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="24">
              <el-form-item label="说明">
                <el-input v-model="docUpdateForm.memo" type="textarea" placeholder="说明信息请勿超过 255 个字符" maxlength="255"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <SelectDeptList
            :is-open="deptListOpen"
            @getDeptList="getDeptList"
            @handleSelectedDept="handleSelectedDept"
            @close="closeDeptDialog"/>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-input.is-disabled .el-input__wrapper) {
  .el-input__inner {
    -webkit-text-fill-color: #606266;
  }
}
</style>